<template>
    <div class="auto-scale-container" :style="containerStyle" ref="container">
      <!-- 内容插槽 -->
      <div class="scale-wrapper" :style="wrapperStyle">
        <slot></slot>
      </div>
    </div>
  </template>
  
  <script>
    import { throttle } from 'lodash'
  
    export default {
      name: 'AutoScaleContainer',
      props: {
        // 设计稿基准尺寸
        baseWidth: {
          type: Number,
          default: 1920,
        },
        baseHeight: {
          type: Number,
          default: 1080,
        },
        // 缩放模式：fit（等比适应）| fill（全屏填充）
        mode: {
          type: String,
          default: 'fit',
          validator: v => ['fit', 'fill'].includes(v),
        },
        // 是否启用过渡动画
        transition: {
          type: Boolean,
          default: true,
        },
      },
      data() {
        return {
          scale: 1,
          wrapperWidth: this.baseWidth,
          wrapperHeight: this.baseHeight,
        }
      },
      computed: {
        containerStyle() {
          return {
            backgroundColor: this.$attrs.backgroundColor || '#021428',
          }
        },
        wrapperStyle() {
          return {
            width: `${this.wrapperWidth}px`,
            height: `${this.wrapperHeight}px`,
            transform: `scale(${this.scale}) translate(-50%, -50%)`,
            transition: this.transition ? 'transform 0.3s' : 'none',
            transformOrigin: '0 0',
          }
        },
      },
      mounted() {
        this.initScale()
        this.addResizeListener()
      },
      beforeDestroy() {
        this.removeResizeListener()
      },
      methods: {
        // 初始化缩放比例
        initScale() {
          const { clientWidth: w, clientHeight: h } = document.documentElement
          this.calculateScale(w, h)
        },
  
        // 核心计算逻辑
        calculateScale(w, h) {
          const baseRatio = this.baseWidth / this.baseHeight
          const currentRatio = w / h
  
          if (this.mode === 'fill') {
            this.scale = Math.min(w / this.baseWidth, h / this.baseHeight)
          } else {
            if (currentRatio > baseRatio) {
              this.scale = h / this.baseHeight
              this.wrapperWidth = h * baseRatio
            } else {
              this.scale = w / this.baseWidth
              this.wrapperHeight = w / baseRatio
            }
          }
  
          this.$emit('scale-change', this.scale)
        },
  
        // 防抖的窗口监听
        addResizeListener() {
          this.resizeHandler = throttle(() => {
            const { innerWidth: w, innerHeight: h } = window
            this.calculateScale(w, h)
          }, 300)
          window.addEventListener('resize', this.resizeHandler)
        },
  
        removeResizeListener() {
          if (this.resizeHandler) {
            window.removeEventListener('resize', this.resizeHandler)
          }
        },
  
        // 手动更新方法（供外部调用）
        updateScale() {
          this.initScale()
        },
      },
    }
  </script>
  
  <style scoped>
    .auto-scale-container {
      position: fixed;
      top: 0;
      left: 0;
      z-index: 1001;
      width: 100vw;
      height: 100vh;
      overflow: hidden;
    }
  
    .scale-wrapper {
      position: absolute;
      top: 50%;
      left: 50%;
      transform-origin: 0 0;
      transform-style: preserve-3d; /* 解决模糊问题 */
      backface-visibility: hidden;
      will-change: transform; /* 优化GPU渲染 */
      overflow: hidden;
    }
  </style>
  